<!DOCTYPE html>
<html>
<head>
    <title>Laser Resonator with Brewster Windows</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Set styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px SimHei';

        // Define layout parameters
        const centerY = 200;
        const centerX = canvas.width / 2;
        const m1_x = 100;
        const m2_x = 700;
        const mirrorHeight = 200;

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // 1. Draw Mirrors (M1 and M2)
        ctx.beginPath();
        ctx.moveTo(m1_x, centerY - mirrorHeight / 2);
        ctx.lineTo(m1_x, centerY + mirrorHeight / 2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(m2_x, centerY - mirrorHeight / 2);
        ctx.lineTo(m2_x, centerY + mirrorHeight / 2);
        ctx.stroke();

        // 2. Draw Optical Axis and Output Laser Beam
        ctx.beginPath();
        ctx.moveTo(m1_x, centerY);
        ctx.lineTo(m2_x, centerY);
        ctx.stroke();
        drawArrow(m2_x, centerY, m2_x + 60, centerY);

        // 3. Draw Gain Medium
        const gainMediumWidth = 200;
        const gainMediumHeight = 40;
        ctx.strokeRect(centerX - gainMediumWidth / 2, centerY - gainMediumHeight / 2, gainMediumWidth, gainMediumHeight);

        // 4. Draw Brewster Windows
        const windowWidth = 90;
        const windowHeight = 10;
        const tiltAngleRad = 30 * Math.PI / 180;
        const bw1_x = 230;
        const bw2_x = 570;

        // Left Brewster Window (\ shape)
        ctx.save();
        ctx.translate(bw1_x, centerY);
        ctx.rotate(tiltAngleRad);
        ctx.strokeRect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
        ctx.restore();

        // Right Brewster Window (/ shape)
        ctx.save();
        ctx.translate(bw2_x, centerY);
        ctx.rotate(-tiltAngleRad);
        ctx.strokeRect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
        ctx.restore();

        // --- Add Labels and Annotations ---

        // 5. Labels for mirrors
        ctx.font = '18px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('M₁', m1_x, centerY + mirrorHeight / 2 + 25);
        ctx.fillText('M₂', m2_x, centerY + mirrorHeight / 2 + 25);

        // 6. Label for output laser
        ctx.font = '20px SimHei';
        ctx.textAlign = 'left';
        ctx.fillText('激光', m2_x + 10, centerY - 15);

        // 7. Label for "反射镜" (Reflecting Mirror)
        ctx.textAlign = 'center';
        const mirrorLabelY = centerY + mirrorHeight / 2 + 55;
        ctx.fillText('反射镜', centerX, mirrorLabelY);
        const mirrorLineBranchY = mirrorLabelY - 20;
        ctx.beginPath();
        ctx.moveTo(centerX, mirrorLabelY - 15);
        ctx.lineTo(centerX, mirrorLineBranchY);
        ctx.lineTo(m1_x, centerY + mirrorHeight / 2);
        ctx.moveTo(centerX, mirrorLineBranchY);
        ctx.lineTo(m2_x, centerY + mirrorHeight / 2);
        ctx.stroke();

        // 8. Label for "布儒斯特窗锗板" (Brewster window germanium plate)
        const brewsterLabelY = centerY - mirrorHeight / 2 - 40;
        ctx.fillText('布儒斯特窗锗板', centerX, brewsterLabelY);
        const brewsterArrowBranchY = brewsterLabelY + 15;
        ctx.beginPath();
        ctx.moveTo(centerX, brewsterLabelY + 10);
        ctx.lineTo(centerX, brewsterArrowBranchY);
        ctx.stroke();
        drawArrow(centerX, brewsterArrowBranchY, bw1_x, centerY - 20);
        drawArrow(centerX, brewsterArrowBranchY, bw2_x, centerY - 20);

        // 9. Angle α annotations
        const arcRadius = 30;
        ctx.font = 'italic 18px Times New Roman';
        ctx.lineWidth = 1;
        // Left angle α
        ctx.beginPath();
        ctx.arc(bw1_x, centerY, arcRadius, 0, tiltAngleRad);
        ctx.stroke();
        ctx.fillText('α', bw1_x + arcRadius * 0.7, centerY - arcRadius * 0.7);

        // Right angle α
        ctx.beginPath();
        ctx.arc(bw2_x, centerY, arcRadius, Math.PI - tiltAngleRad, Math.PI);
        ctx.stroke();
        ctx.fillText('α', bw2_x - arcRadius * 0.7, centerY - arcRadius * 0.7);

        // 10. Caption
        ctx.lineWidth = 2; // Reset line width
        ctx.font = '22px SimHei';
        ctx.fillText('习题 12-52 图', centerX, canvas.height - 20);

    </script>
</body>
</html>